<!-- 最左边的选择框 -->
<template> 
  <div class="mycard">
    <header @click="personalMsg">
      <img :src="require(`@/static/images/${user.img}`)" class="avatar" />
    </header>
    <div class="navbar" @click="clearSearch">
      <router-link to="/chat" class="icon iconfont icon-msg"></router-link>
      <router-link to="/friend" class="icon iconfont icon-friend"></router-link>
      <router-link to="/my" class="icon iconfont icon-collection"></router-link>
      <!-- <span class="icon iconfont icon-msg"></span>
      <span class="icon iconfont icon-friend"></span>
      <span class="icon iconfont icon-collection"></span>
      <chat v-if="status==0" />
      <friend v-if="status==1" />
      <my v-if="status==2" /> -->
    </div>
    <footer>
      <i class="icon iconfont icon-more"></i>
    </footer>
  </div>
</template>

<script>
import chat from '@/page/chat/chat.vue'
import friend from '@/page/friend/friend.vue'
import my from '@/page/resume/resume.vue'
import { mapState,mapActions } from "vuex";

export default {
  components:{
    chat,
    friend,
    my
  },
  computed: {
    ...mapState(["user"]),
    getPaht() {
      return (
        process.env.VUE_APP_IM_SOCKET_SERVER +
        "?token=" +
        sessionStorage.getItem("token")
      );
    },
  },
  data() {
    return {
      status:-1,
      UserListParams: {
        pageNo: 1,
      },
      params: {
        groupId: "",
        receiverId: "1",
        type: "TEXT",
        content: "hello",
        // fileId: "",
        // fileName: "",
        // fileType: "",
        // fileSize: "",
        // callId: "",
        // callOperate: "",
      },
      socket:{},
    };
  },
  mounted() {
    // this.init();
    // setTimeout(() => {
    //   this.send(JSON.stringify(this.params))
    // }, 2000);
    this.socketInit();
  },
  methods: {
   ...mapActions([
             'socketInit',
    	]),

    clearSearch() {
      this.$store.dispatch("search", "");
    },
    init: function () {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.getPaht);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
      }
    },
    open: function () {
        console.log("socket连接成功",this.socket.readyState);
    },
    error: function () {
           console.log("连接错误");
    },
    getMessage: function (msg) {
        console.log("收到消息", msg.data);
    },
    send: function (params) {
      this.socket.send(params);
        console.log("发送成功", params);
    
    },
    close: function (close) {
        console.log("socket已经关闭", close);
    },
    // 点击头像
    personalMsg(){

    }
  },
};
</script>

<style lang="stylus" scoped>
@import '../../assets/fonts/iconfont.css';

.mycard {
  position: relative;
  width: 100%;
  height: 100%;

  .avatar {
    width: 36px;
    height: 36px;
    margin: 20px 12px 0 12px;
    border-radius: 2px;
  }

  .navbar {
    width: 100%;
    text-align: center;
  }

  .icon {
    display: inline-block;
    font-size: 26px;
    margin-top: 28px;
    padding: 0 16px;
    box-sizing: border-box;
    color: rgb(173, 174, 175);
    opacity: 0.8;
    cursor: pointer;

    &.active {
      color: rgb(0, 220, 65);
    }

    &:hover {
      opacity: 1;
    }
  }

  .icon-msg, .icon-more {
    font-size: 22px;
  }

  .icon-msg {
    padding: 0 19px;
  }
}
header{
  cursor pointer;
}
footer {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}
</style>
